<!-- 
    锚点 + 父容器的scroll-behavior: smooth;
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style lang="less">
        #root {
            display: flex;
            height: 90vh;
        }

        .left {
            flex: 0 0 100px;
            overflow: scroll;
            scroll-behavior: smooth;

        }
        .left>.item{
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 1px solid red;
            cursor: pointer;
        }
        .right{
            height: 800px;
            flex: 1;
            background-color: aliceblue;
            text-align: center;
            overflow: scroll;
            scroll-behavior: smooth;

        }
        .right>.item{
            height: 300px;
            border: 1px solid blue;
            line-height: 300px;
            /* transition: 1s; */
        }
    </style>
</head>

<body>
    <button id="btn">点我</button>
    <div id="root">
        <div class="left" id="left">
            <div class="item" v-for="v in 20"  id="leftItem">
                <a :href="'#box'+v">{{v}}</a>
            </div>
        </div>
        <div class="right" id="right">
            <div class="item" v-for="v in 20 " :id="'box'+v" >{{v}}</div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#root",
    });

    /* right.onscroll = function (e){
        // console.log(1);
        // console.log(e);
        // console.log(right.scrollTop);
    }; */

    btn.onclick = function(){
        left.scrollTo(0,299);
    };

    right.addEventListener('scroll',()=>{
        // console.log(right.firstElementChild.offsetHeight);
        let index = Math.ceil(right.scrollTop /right.firstElementChild.offsetHeight);
        console.log(index);
        // console.log(right.scrollTop);
        // 计算出滑动到了第几个元素
        /* 
        // 在这里setIndex 
        console.log(index);
        // 根据index计算出 index
        // console.log(left.firstElementChild.offsetHeight);
        left.scrollTo(0,left.firstElementChild.offsetHeight*index); */

    })
</script>

</html>